<template>
	<view>
		<uni-nav-bar left-icon="back" @click-left="back" @click-right="save()" right-text="保存" title="地址修改"></uni-nav-bar>
		<view class="list">
			<view class="list-item" @click="thooseType(1)">
				<text>发票类型</text>
				<view class="input">
					<view class="input">
						<text>{{ invoiceData.type == 1 ? '公司' : '个人' }}</text>
						<uni-icons type="arrowdown" size="30" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="list-item">
				<text>发票抬头</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="header"
						@input="input"
						:value="invoiceData.header"
						placeholder="请填写发票抬头"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="list-item">
				<text>公司税号</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="tax_no"
						@input="input"
						:value="invoiceData.tax_no"
						placeholder="请填写公司税号"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="list">
			<view class="list-item" @click="thooseType(2)">
				<text>需要增值税专用发票</text>
				<view class="input">
					<view class="input">
						<text>{{ invoiceData.is_duty == 1 ? '是' : '否' }}</text>
						<uni-icons type="arrowdown" size="30" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="list-item">
				<text>注册地址</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="reg_address"
						@input="input"
						:value="invoiceData.reg_address"
						placeholder="请填写注册地址"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="list-item">
				<text>公司电话</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="phone"
						@input="input"
						:value="invoiceData.phone"
						placeholder="请填写公司电话"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="list-item">
				<text>开户银行</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="open_bank"
						@input="input"
						:value="invoiceData.open_bank"
						placeholder="请填写开户银行"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="list-item">
				<text>银行账号</text>
				<view class="input">
					<input
						class="inputText"
						type="text"
						data-name="bank_no"
						@input="input"
						:value="invoiceData.bank_no"
						placeholder="请填写银行账号"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
		</view>
		<mpvue-picker
			:themeColor="themeColor"
			ref="mpvuePicker"
			mode="selector"
			:deepLength="1"
			:pickerValueDefault="pickerValueDefault"
			@onConfirm="onConfirm"
			:pickerValueArray="pickerSingleArray"
		></mpvue-picker>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
export default {
	components: { uniNavBar, uniIcons, mpvuePicker },
	data() {
		return {
			invoiceData: {
				type: 1,
				header: '',
				tax_no: '',
				is_duty: 0,
				reg_address: '',
				phone: '',
				open_bank: '',
				bank_no: '',
				is_default: 1
			},
			pickerSingleArray: [
				{
					label: '公司',
					value: 1
				},
				{
					label: '个人',
					value: 2
				}
			],
			pickerValueDefault: [0],
			themeColor: '#007AFF',
			pickerType: 1
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		async getData() {
			let res = await this.$request.get('/setting/editMemberInvoice', {});
			let data = res.data.data.list;
			if (data) {
				let { type, header, tax_no, is_duty, reg_address, phone, open_bank, bank_no, is_default } = data;
				this.invoiceData = {
					type,
					header,
					tax_no,
					is_duty,
					reg_address,
					phone,
					open_bank,
					bank_no,
					is_default
				};
			}
		},
		input(e) {
			let name = e.target.dataset.name;
			let value = e.detail.value;
			this.invoiceData[name] = value;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		async save() {
			let invoiceData = this.invoiceData;
			for (let key in invoiceData) {
				if (!invoiceData[key] && key != 'is_duty') {
					uni.showToast({
						title: '请将表单填写完整',
						duration: 2000
					});
					console.log(key);
					return false;
				}
			}
			let res = await this.$request.post('/setting/editMemberInvoice', {
				data: {
					...invoiceData
				}
			});
			if (res.data.code == 10000) {
				uni.showToast({
					title: '保存成功',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 2000);
			} else {
				uni.showToast({
					title: '保存失败',
					duration: 2000
				});
			}
		},
		onConfirm(e) {
			let invoiceData = this.invoiceData;
			if (this.pickerType == 1) {
				invoiceData.type = e.value[0];
			} else {
				invoiceData.is_duty = e.value[0];
			}
			this.invoiceData = invoiceData;
		},
		changeDefault(e) {
			this.invoiceData.is_default = e.detail.value ? 1 : 0;
		},
		thooseType(type) {
			this.pickerType = type;
			if (type == 1) {
				this.pickerSingleArray = [
					{
						label: '公司',
						value: 1
					},
					{
						label: '个人',
						value: 2
					}
				];
			} else {
				this.pickerSingleArray = [
					{
						label: '否',
						value: 0
					},
					{
						label: '是',
						value: 1
					}
				];
			}
			this.$refs.mpvuePicker.show();
		}
	}
};
</script>

<style lang="scss">
.list {
	width: 100%;
	box-sizing: border-box;
	padding-left: 30upx;
	.list-item {
		width: 100%;
		height: 110upx;
		border-bottom: 2upx solid #e7e7e7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 20upx;
		font-size: $uni-font-size-base;
		color: #333333;
		.input {
			width: 400upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.inputText {
				color: #333333;
				font-size: $uni-font-size-base;
				width: 100%;
				text-align: right;
				box-sizing: border-box;
			}
		}
	}
}
.placeholder {
	color: #d7d7d7;
}
.block {
	width: 100%;
	height: 20upx;
	background-color: #f5f6f7;
}
</style>
